// 生成皮肤的互动功能样式（公用）
@mixin generate-skin-basic-iar-common-style($--skin-configs) {
  // -------- 互动功能 -------- //
  .pws-interactive-entrance-button {
    color: map.get($--skin-configs, 'interactive-entrance-button:text-color') !important;
    background-color: map.get($--skin-configs, 'interactive-entrance-button:bg-color') !important;
    &:hover {
      background-color: map.get($--skin-configs, 'interactive-entrance-button--hover:bg-color') !important;
    }
  }
  .pws-interactive-entrance-arrow {
    color: map.get($--skin-configs, 'interactive-entrance-arrow:text-color') !important;
  }

  // --------- 输入框 --------- //
  .pws-iar-input {
    background-color: map.get($--skin-configs, 'iar-input:bg-color') !important;
  }
  .pws-iar-input-native {
    color: map.get($--skin-configs, 'iar-input:text-color') !important;
    &::placeholder {
      color: map.get($--skin-configs, 'iar-input:text-color') !important;
      opacity: 0.3;
    }
  }
  .plv-iar-input__clear {
    background: rgba(map.get($--skin-configs, 'iar-input-clear:icon-color'), 0.1) !important;
  }
  .plv-iar-input__clear__icon {
    color: rgba(map.get($--skin-configs, 'iar-input-clear:icon-color'), 0.3) !important;
  }

  // --------- 按钮 --------- //
  .pws-iar-primary-button {
    color: map.get($--skin-configs, 'primary-button:text-color') !important;
    background-color: map.get($--skin-configs, 'primary-button:bg-color') !important;
    border: none !important;
    &.is-disabled {
      opacity: 0.5;
    }
  }

  // --------- 挂件 --------- //
  .pws-iar-pendant-text {
    color: map.get($--skin-configs, 'iar-pendant:text-color') !important;
  }

  // --------- 商品库 --------- //
  .pws-iar-product-list-wrap {
    background-color: map.get($--skin-configs, 'main-tab-body:bg-color') !important;
  }
  .pws-iar-product-list-content {
    background-color: map.get($--skin-configs, 'iar-product-list-content:bg-color') !important;
    &::-webkit-scrollbar-thumb {
      background-color: map.get($--skin-configs, 'main-tab-body:scrollbar-color') !important;
    }
  }
  .pws-iar-product-list-total {
    color: map.get($--skin-configs, 'main-text-color') !important;
    background-color: inherit !important;
  }
  .pws-iar-icon-product-list-icon {
    path {
      fill: map.get($--skin-configs, 'iar-product-list-shop:icon-color');
    }
  }
  .pws-iar-icon-product-list-icon-recruitment {
    path {
      fill: map.get($--skin-configs, 'iar-product-list-recruitment:icon-color');
    }
  }
  .pws-iar-product-list-total-highlight {
    color: map.get($--skin-configs, 'main-highlight-text-color') !important;
  }
  .pws-iar-product-list-name {
    color: map.get($--skin-configs, 'iar-product-list-good-name:text-color') !important;
  }
  .pws-iar-product-list-number {
    color: #fff !important;
  }
  .plv-iar-product__item {
    color: map.get($--skin-configs, 'iar-product-list-good-name:text-color') !important;
  }
  .pws-iar-product-list-desc-label {
    color: map.get($--skin-configs, 'main-text-color') !important;
    opacity: 0.8;
  }
  .pws-iar-product-list-desc {
    color: map.get($--skin-configs, 'describe-text-color') !important;
    opacity: 1;
  }
  .pws-iar-product-list-label {
    color: map.get($--skin-configs, 'iar-product-list-label:text-color') !important;
    background-color: map.get($--skin-configs, 'iar-product-list-label:bg-color') !important;
  }
  .pws-iar-product-list-number {
    background-color: map.get($--skin-configs, 'iar-product-list-name-number:bg-color') !important;
  }
  .pws-iar-product-list-empty-text {
    color: map.get($--skin-configs, 'describe-text-color') !important;
  }
  .pws-iar-product-list-empty-img {
    background-image: url(map.get($--skin-configs, 'iar-product-list-empty:icon-image')) !important;
  }
  .pws-iar-product-list-item {
    border-bottom-color: map.get($--skin-configs, 'iar-product-list-item:border-color') !important;
  }
  .plv-iar-product-label-list__item {
    color: map.get($--skin-configs, 'iar-product-list-product-label-item:text-color') !important;
    background-color: map.get($--skin-configs, 'iar-product-list-product-label-item:bg-color') !important;

    &.plv-iar-product-label-list__item--active {
      color: map.get($--skin-configs, 'iar-product-list-product-label-item--active:text-color') !important;
      border-color: map.get($--skin-configs, 'iar-product-list-product-label-item--active:border-color') !important;
    }
  }
  .plv-iar-product-label-list__arrow__icon {
    color: map.get($--skin-configs, 'iar-product-list-product-label-item:text-color') !important;
  }
  .plv-iar-product-label-list__shadow--left {
    background: linear-gradient(90deg, rgba(map.get($--skin-configs, 'iar-product-list-content:bg-color'), 1) 0, rgba(map.get($--skin-configs, 'iar-product-list-content:bg-color'), 0) 100%);
  }
  .plv-iar-product-label-list__shadow--right {
    background: linear-gradient(90deg, rgba(map.get($--skin-configs, 'iar-product-list-content:bg-color'), 0) 0, rgba(map.get($--skin-configs, 'iar-product-list-content:bg-color'), 1) 100%);
  }
  .plv-iar-product__list-loading,
  .pws-iar-product-list-empty-icon {
    color: map.get($--skin-configs, 'describe-text-color') !important;
    opacity: 0.8;
  }
  .plv-iar-product__top__search__icon {
    color: map.get($--skin-configs, 'iar-input-prefix-icon:icon-color') !important;
  }

  // ---------- 订单 --------- //
  .pws-iar-order-enter {
    color: map.get($--skin-configs, 'iar-mobile-order-enter-button:text-color') !important;
  }

  // ---------- 中奖记录 --------- //
  .pws-iar-lottery-record-button {
    background-color: map.get($--skin-configs, 'primary-color') !important;
  }
  .pws-iar-lottery-record-button-received {
    color: $--color-white !important;
    background-color: rgba(map.get($--skin-configs, 'primary-color'), 0.5) !important;
  }

  // --------- 置顶公告 ---------- //
  .pws-iar-bulletin-top-banner {
    background-color: map.get($--skin-configs, 'iar-bulletin-top-banner:bg-color') !important;
  }
  .pws-iar-bulletin-top-banner-icon {
    fill: map.get($--skin-configs, 'iar-bulletin-top-banner:text-color') !important;
  }
  .pws-iar-bulletin-top-banner-text,
  .pws-iar-bulletin-top-banner-close {
    &,
    & * {
      color: map.get($--skin-configs, 'iar-bulletin-top-banner:text-color') !important;
    }
  }

  // --------- 快速答题卡 --------- //
  .pws-iar-quick-answer-option.is-active {
    color: map.get($--skin-configs, 'primary-color') !important;
    border-color: map.get($--skin-configs, 'primary-color') !important;
  }

  // --------- 问答 --------- //
  .pws-iar-qa-filter {
    background-color: map.get($--skin-configs, 'iar-qa-filter:bg-color') !important;
    border-bottom-color: map.get($--skin-configs, 'iar-qa-filter:border-color') !important;
  }
  .pws-iar-qa-filter-desc {
    color: map.get($--skin-configs, 'iar-qa-filter-desc:text-color') !important;
  }
  .pws-iar-qa-new-msg-button {
    color: map.get($--skin-configs, 'iar-qa-new-msg-button:text-color') !important;
    background-color: map.get($--skin-configs, 'iar-qa-new-msg-button:bg-color') !important;
  }
  .pws-iar-qa-select {
    color: map.get($--skin-configs, 'iar-qa-select:text-color') !important;
  }
  .pws-iar-qa-select-arrow {
    border-color: map.get($--skin-configs, 'iar-qa-select:border-color') !important;
  }
  .pws-iar-icon-qa-ask-emotion-icon {
    path {
      fill: map.get($--skin-configs, 'iar-icon-qa-ask-emotion:icon-color');
    }
  }

  // --------- 投票 --------- //
  .pws-iar-vote {
    .plv-iar-vote__no-data {
      color: map.get($--skin-configs, 'iar-vote-no-data:text-color') !important;
    }
  }
}

// 生成皮肤的互动功能样式（PC 端）
@mixin generate-skin-basic-iar-pc-style($--skin-configs) {
  @include generate-skin-basic-iar-common-style($--skin-configs);

  // --------- 中奖记录 ---------- //
  .pws-iar-pc-lottery-record {
    background: none !important;
  }
  .pws-interactive-msg__content {
    color: map.get($--skin-configs, 'iar-pc-lottery-record-msg:text-color') !important;
  }

  // --------- 图文直播 ---------- //
  .pws-pc-tuwen-live-menu-item:hover,
  .pws-pc-tuwen-live-menu-item.is-active {
    color: map.get($--skin-configs, 'primary-color') !important;
  }
  .pws-pc-tuwen-live-menu-item.is-active {
    background-color: rgba(map.get($--skin-configs, 'primary-color'), 0.15) !important;
  }
  .pws-iar-pc-tuwen-live-content-name {
    color: map.get($--skin-configs, 'primary-color') !important;
  }

  // ---------- 问答 ---------- //
  .pws-iar-pc-qa-body {
    background-color: map.get($--skin-configs, 'iar-qa-body:bg-color') !important;
  }
  .pws-iar-pc-qa-body-scroll {
    &::-webkit-scrollbar-thumb {
      background-color: map.get($--skin-configs, 'main-tab-body:scrollbar-color') !important;
    }
  }
  .pws-iar-pc-qa-empty-text {
    color: map.get($--skin-configs, 'describe-text-color') !important;
  }
  .pws-iar-pc-qa-select-option-popper {
    background-color: map.get($--skin-configs, 'iar-pc-qa-select-option:bg-color') !important;
  }
  .pws-iar-pc-qa-select-option {
    color: map.get($--skin-configs, 'iar-pc-qa-select-option:text-color') !important;
    background-color: map.get($--skin-configs, 'iar-pc-qa-select-option:bg-color') !important;
    border-color: map.get($--skin-configs, 'iar-pc-qa-select-option:border-color') !important;
    &:hover {
      background-color: map.get($--skin-configs, 'iar-pc-qa-select-option--hover:bg-color') !important;
    }
    &.is-active {
      color: map.get($--skin-configs, 'iar-pc-qa-select-option--active:text-color') !important;
    }
  }
  .pws-iar-pc-qa-ask {
    background-color: map.get($--skin-configs, 'pc-msg-bottom-input-wrap:bg-color') !important;
  }
  .pws-iar-pc-qa-ask-input {
    background-color: map.get($--skin-configs, 'pc-msg-input:bg-color') !important;
  }
  .pws-iar-pc-qa-ask-input-textarea {
    color: map.get($--skin-configs, 'pc-msg-input:text-color') !important;
    &::placeholder {
      color: map.get($--skin-configs, 'pc-msg-input-placeholder:text-color') !important;
    }
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: map.get($--skin-configs, 'pc-msg-input:scrollbar-color') !important;
    }
  }
  .pws-iar-pc-qa-ask-emotion-icon {
    color: map.get($--skin-configs, 'iar-pc-qa-ask-emotion:text-color') !important;
    filter: map.get($--skin-configs, 'iar-pc-qa-ask-emotion:background-filter')
  }
  .pws-iar-pc-qa-ask-emotion-popper {
    background-color: map.get($--skin-configs, 'pc-emotion-panel:bg-color') !important;
    box-shadow: none !important;
    &::-webkit-scrollbar-thumb {
      background-color: map.get($--skin-configs, 'panel-scrollbar-color') !important;
    }
    &::-webkit-scrollbar-track {
      box-shadow: none;
    }
  }
  .pws-iar-pc-qa-ask-send-button {
    color: map.get($--skin-configs, 'pc-msg-send-button:text-color') !important;
    background-color: map.get($--skin-configs, 'pc-msg-send-button:bg-color') !important;
    &.is-disabled {
      color: map.get($--skin-configs, 'pc-msg-send-button--disabled:text-color') !important;
      background-color: map.get($--skin-configs, 'pc-msg-send-button--disabled:bg-color') !important;
    }
  }
  .pws-iar-pc-qa-item {
    color: map.get($--skin-configs, 'iar-qa-item-content:text-color') !important;
    background-color: map.get($--skin-configs, 'iar-qa-item:bg-color') !important;
  }
  .pws-iar-pc-qa-item-more {
    color: map.get($--skin-configs, 'iar-qa-item-content:text-color') !important;
    background-color: map.get($--skin-configs, 'iar-qa-item:bg-color') !important;
    .pws-iar-multiline-btn-shadow {
      background: linear-gradient(270deg, map.get($--skin-configs, 'iar-qa-item:bg-color') 0%, rgba(225, 238, 252, 0) 100%) !important;
    }
    .pws-iar-multiline-btn-text {
      color: map.get($--skin-configs, 'iar-qa-item-more:text-color') !important;
    }
    .pws-iar-multiline-btn-arrow {
      border-color: map.get($--skin-configs, 'iar-qa-item-more:text-color') !important;
    }
  }
  .pws-iar-pc-qa-item-data {
    color: map.get($--skin-configs, 'iar-qa-item-info:text-color') !important;
  }
  .pws-iar-pc-qa-item-answer {
    border-color: map.get($--skin-configs, 'iar-qa-item:border-color') !important;
  }
}

// 生成皮肤的互动功能样式（Mobile 端）
@mixin generate-skin-basic-iar-mobile-style($--skin-configs) {
  @include generate-skin-basic-iar-common-style($--skin-configs);

  // --------- 问答 --------- //
  .pws-iar-mobile-qa-body {
    background-color: map.get($--skin-configs, 'iar-qa-body:bg-color') !important;
  }
  .pws-iar-mobile-qa-no-data {
    color: map.get($--skin-configs, 'describe-text-color') !important;
    background-color: map.get($--skin-configs, 'main-tab-body:bg-color') !important;
    &::before {
      background-image: url(map.get($--skin-configs, 'iar-mobile-qa-no-data:icon-image')) !important;
    }
  }
  .pws-iar-mobile-qa-ask-entry {
    background-image: url(map.get($--skin-configs, 'iar-mobile-qa-ask-entry:icon-image')) !important;
    background-size: 100% 100%;
  }
  .pws-iar-mobile-qa-item {
    color: map.get($--skin-configs, 'iar-qa-item-content:text-color') !important;
    background-color: map.get($--skin-configs, 'iar-qa-item:bg-color') !important;
  }
  .pws-iar-mobile-qa-item-question,
  .pws-iar-mobile-qa-item-answer {
    background: none !important;
  }
  .pws-iar-mobile-qa-item-more {
    color: map.get($--skin-configs, 'iar-qa-item-content:text-color') !important;
    background-color: map.get($--skin-configs, 'iar-qa-item:bg-color') !important;
    .pws-iar-multiline-btn-shadow {
      background: linear-gradient(270deg, map.get($--skin-configs, 'iar-qa-item:bg-color') 0%, rgba(225, 238, 252, 0) 100%) !important;
    }
    .pws-iar-multiline-btn-text {
      color: map.get($--skin-configs, 'iar-qa-item-more:text-color') !important;
    }
    .pws-iar-multiline-btn-arrow {
      border-color: map.get($--skin-configs, 'iar-qa-item-more:text-color') !important;
    }
  }
  .pws-iar-mobile-qa-item-data {
    color: map.get($--skin-configs, 'iar-qa-item-info:text-color') !important;
  }
  .pws-iar-mobile-qa-item-answer-border {
    border-color: map.get($--skin-configs, 'iar-qa-item:border-color') !important;
  }
  .pws-iar-mobile-no-more {
    color: map.get($--skin-configs, 'iar-qa-no-more:text-color') !important;
  }
  .pws-iar-mobile-qa-ask {
    background-color: map.get($--skin-configs, 'iar-mobile-qa-input-wrap:bg-color') !important;
  }
  .pws-iar-mobile-qa-ask-input-textarea {
    color: map.get($--skin-configs, 'iar-mobile-qa-input:text-color') !important;
    background-color: map.get($--skin-configs, 'iar-mobile-qa-input:bg-color') !important;
    &::placeholder {
      color: inherit !important;
      opacity: 0.5;
    }
  }
  .pws-iar-mobile-qa-ask-emotion-icon {
    color: map.get($--skin-configs, 'iar-mobile-qa-ask-emotion:text-color') !important;
    filter: map.get($--skin-configs, 'iar-mobile-qa-ask-emotion:background-filter')
  }
  .pws-iar-mobile-qa-ask-send-button {
    color: map.get($--skin-configs, 'iar-mobile-qa-ask-send-button:text-color') !important;
  }

  // ---------- 图文直播 --------- //
  .pws-iar-mobile-tuwen-live-header {
    color: map.get($--skin-configs, 'iar-mobile-tuwen-live-header:text-color') !important;
  }
  .pws-iar-mobile-tuwen-live-content-name {
    color: map.get($--skin-configs, 'iar-mobile-tuwen-live-content-name:text-color') !important;
  }
  .pws-iar-mobile-tuwen-live-content-time {
    color: map.get($--skin-configs, 'iar-mobile-tuwen-live-content-time:text-color') !important;
  }
  .pws-iar-mobile-tuwen-live-content-text {
    color: map.get($--skin-configs, 'iar-mobile-tuwen-live-content:text-color') !important;
  }
  .pws-iar-mobile-tuwen-live-no-more {
    color: map.get($--skin-configs, 'iar-mobile-tuwen-live-no-more:text-color') !important;
  }

  // ---------- 云席  --------- //
  // @PLV-WARN 目前只有部分皮肤适配了云席
  @if map.has-key($--skin-configs, 'iar-mobile-seat-table-light') {
    // 云席 loading
    .plv-iar-seat-table__loading-wrapper {
      background: map.get($--skin-configs, 'main-bg-color') !important;
    }

    .c-seat-table--mobile {
      // 云席
      .pws-iar-seat-table-light {
        background-image: url(map.get($--skin-configs, 'iar-mobile-seat-table-light')) !important;
      }
      .pws-iar-seat-table-guest-bg {
        background-image: url(map.get($--skin-configs, 'iar-mobile-seat-table-guest:bg')) !important;
      }
      .pws-iar-seat-table-guest-like {
        background-image: url(map.get($--skin-configs, 'iar-mobile-seat-table-guest-like')) !important;
      }
      .pws-iar-seat-table-sofa-normal {
        background-image: url(map.get($--skin-configs, 'iar-mobile-seat-table-sofa-normal')) !important;
      }
      .pws-iar-seat-table-sofa-vip {
        background-image: url(map.get($--skin-configs, 'iar-mobile-seat-table-sofa-vip')) !important;
      }
      .pws-iar-seat-name-text {
        color: map.get($--skin-configs, 'iar-mobile-seat-name-text:text-color') !important;
      }
      .pws-iar-seat-name-bLine {
        background-color: map.get($--skin-configs, 'iar-mobile-seat-name-bLine:bg-color') !important;
      }
      .pws-seat-table-current-seat {
        border-color: map.get($--skin-configs, 'iar-mobile-seat-table-current-seat:border-color') !important;
      }
    }


    // 云席用户卡片
    .pws-mobile-user-card__top-bg {
      background-image: url(map.get($--skin-configs, 'iar-mobile-seat-user-card-top:bg')) !important;
    }
    .pws-user-card__info__content__corner {
      background: map.get($--skin-configs, 'iar-mobile-seat-user-card-content--corner:bg') !important;
      background-blend-mode: soft-light, normal;
    }
    .pws-user-card__qrcode-title {
      background-image: map.get($--skin-configs, 'iar-mobile-seat-user-card-qrcode-title:bg') !important;
    }
    .pws-user-card__qrcode-wrap {
      background-image: url(map.get($--skin-configs, 'iar-mobile-seat-user-card-qrcode-wrap:bg')) !important;
      background-size: 100% 100% !important;
    }
    .pws-user-card__collection__btn {
      background-image: map.get($--skin-configs, 'iar-mobile-seat-user-card-collect-btn:bg') !important;
    }
    .pws-user-card__collection__btn--cancel {
      background: map.get($--skin-configs, 'iar-mobile-seat-user-card-collect-btn__cancel:bg') !important;
      border-color: map.get($--skin-configs, 'primary-color') !important;
      span {
        background-image: map.get($--skin-configs, 'iar-mobile-seat-user-card-collect-btn__cancel:text-bg') !important;
      }
    }

    // 云席入座提示
    .pws-has-seat-tips__ico {
      background: center url(map.get($--skin-configs, 'iar-mobile-seat-tips-ico:bg')) no-repeat !important;
      background-size: cover !important;
    }
    .pws-has-seat-tips__seat__count {
      color: map.get($--skin-configs, 'iar-mobile-seat-tips-seat-count:text-color') !important;
    }


    // 云席竖向模板
    .pws-mobile-seat-table-vertical-bg {
      background: map.get($--skin-configs, 'main-bg-color') !important;

      .pws-iar-seat-table-guest-bg {
        background-image: url(map.get($--skin-configs, 'iar-mobile-seat-table-guest-vertical:bg')) !important;
      }
    }
  }
}
